<template>
  <div class="production">
    <div class="work-list" v-for="(item, index) in list" :key="index" @click="$emit('open')">
      <div v-if="item.workType === 3" class="work">
        <div class="image-work">
          <div class="image-collect" v-if="item.imagesNum === 1">
            <div
              v-for="(img, imgIndex) in item.images"
              :key="imgIndex + '-' + index"
              class="image-item single"
            >
              <img :src="img | imgSize(670, 376)" />
            </div>
          </div>
          <div class="image-collect" v-if="item.imagesNum === 2">
            <div
              v-for="(img, imgIndex) in item.images"
              :key="imgIndex + '-' + index"
              class="image-item double"
            >
              <img :src="img | imgSize(331, 376)" />
            </div>
          </div>
          <div class="image-collect" style="display: block" v-if="item.imagesNum === 3">
            <div
              v-for="(img, imgIndex) in item.images"
              :key="imgIndex + '-' + index"
              class="image-item triple"
              style="float: left;"
              :style="{ 'height:auto': !imgIndex }"
            >
              <img :src="img | imgSize(331, 185)" v-if="imgIndex" />
              <img :src="img | imgSize(331, 376)" v-else />
            </div>
          </div>
          <div class="image-collect" v-if="item.imagesNum >= 4">
            <div
              v-for="(img, imgIndex) in item.images"
              :key="imgIndex + '-' + index"
              class="image-item"
            >
              <img :src="img | imgSize(331, 185)" />
              <div v-if="imgIndex === 3 && item.imagesNum > 4" class="end-item flex-align-center">
                <div>
                  <div class="more-num">{{ item.imagesNum - 4 }}</div>
                  <div class="icon-more">
                    <div></div>
                    <div></div>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="cover">
            <div class="cover-content">
              <span class="view-num" v-if="item.statis.viewCnt">
                {{ item.statis.viewCnt }}
              </span>
            </div>
          </div> -->
        </div>
        <div class="title double-line-ellipsis">{{ item.title }}</div>
        <div class="category">
          <span v-if="item.category || (item.tags && item.tags.length)">
            {{ item.category || (item.tags && item.tags.join('-')) }}
          </span>
          <span v-if="item.createdAt">{{ '发布: ' + item.createdAt }}</span>
        </div>
        <div class="job">{{ item.tag }}</div>
      </div>
      <div class="work" v-else>
        <!-- 只有有时间的展示播放icon -->
        <div class="work-img" :class="{ isShowtrangle: item.durationStr }">
          <img :src="item.cover | imgSize(670, 376)" />
          <div class="duration" v-if="item.durationStr">{{ item.durationStr }}</div>
          <!-- <div class="cover" v-if="item.statis && item.statis.viewCnt">
            <div class="cover-content">
              <span class="view-num">
                {{ item.statis.viewCnt }}
              </span>
            </div>
          </div> -->
        </div>
        <div class="title double-line-ellipsis" :class="{ 'article-title': item.type === 1 }">
          {{ item.title }}
        </div>
        <div class="category">
          <span v-if="item.category || (item.tags && item.tags.length)">
            {{ item.category || (item.tags && item.tags.join('-')) }}
          </span>
          <span v-if="item.createdAt">{{ '发布: ' + item.createdAt }}</span>
        </div>
        <div class="job">{{ item.job }}</div>
      </div>
    </div>
    <h1 style="text-align:center" v-if="!list || !list.length">还没有作品哦</h1>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
      },
    },
    data() {
      return {};
    },
    components: {},
    created() {},
    computed: {},
    watch: {},
    mounted() {},
    methods: {},
  };
</script>
<style lang="less" scoped>
  .title {
    font-size: 3.3rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: #ffffff;
    // color: var(--textBrightColor);
    vertical-align: middle;
  }
  .article-title {
    &::before {
      content: '文章';
      color: #333333;
      font-size: 1.8rem;
      width: 5.4rem;
      height: 3.3rem;
      line-height: 3.3rem;
      text-align: center;
      box-shadow: 0rem 0.3rem 0.6rem 0.1rem rgba(0, 0, 0, 0.1);
      border-radius: 0.6rem;
      display: inline-block;
      background: rgba(#ffffff, 0.7);
      vertical-align: middle;
    }
  }
  .category {
    font-size: 2.4rem;
    font-weight: 400;
    opacity: 0.5;
    span {
      margin-right: 2rem;
    }
  }
  .job {
    font-size: 2.4rem;
    font-weight: 400;
    opacity: 0.5;
  }
  .cover-content {
    position: absolute;
    bottom: 2.4rem;
    left: 2.4rem;
    right: 2.4rem;
    display: flex;
    color: var(--textBrightColor);
  }
  .image-work {
    position: relative;
    margin-bottom: 4rem;
    .image-collect {
      height: 37.6rem;
      width: 67rem;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      // background-color: #000000;
      .image-item {
        width: 33.1rem;
        height: 18.5rem;
        overflow: hidden;
        position: relative;
        border-radius: 1.5rem;

        display: flex;
        align-items: center;
        justify-content: center;
        &:nth-child(2n) {
          margin-left: 0.7rem;
          margin-bottom: 0.6rem;
        }
        img {
          width: 100%;
        }
        &.single {
          width: 100%;
          height: 100%;
        }
        &.double {
          width: 33.1rem;
          height: 100%;

          img {
            width: initial;
            height: 100%;
          }
        }
        &.triple {
          &:first-child {
            height: 100%;
          }
          &:nth-child(3) {
            // width: 100%;
            margin-left: 0.7rem;
            margin-bottom: 0.6rem;
          }
        }
      }
      .end-item {
        width: 33.1rem;
        height: 18.5rem;
        background: rgba(#000000, 0.4);
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        font-size: 6rem;
        font-family: Geometos;
        font-weight: 400;
        color: #ffffff;
        .icon-more {
          display: flex;
          align-items: center;
          div {
            width: 7px;
            height: 7px;
            background: #ffffff;
            border-radius: 50%;
            &:nth-child(2) {
              margin: 0 7px;
            }
          }
        }
      }
    }
    .cover {
      // height: 13.3rem;
      // background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
      // opacity: 0.7;
      // border-radius: 2.0rem;
      // position: absolute;
      // bottom: 0;
      // left: 0;
      // right: 0;
    }
  }
  .work {
    overflow: hidden;
    margin-bottom: 4rem;
    .work-img {
      width: 100%;
      max-height: 37.7rem;
      // height: 37.7rem;
      overflow: hidden;
      position: relative;
      margin-bottom: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1.5rem;
      img {
        width: 100%;
      }
      .duration {
        position: absolute;
        right: 1.3rem;
        bottom: 1.3rem;
        height: 4rem;
        line-height: 4rem;
        background: rgba(#000000, 0.7);
        border-radius: 2rem;
        padding: 0 2rem;
        font-size: 2.4rem;
        font-weight: 400;
        color: rgba(#ffffff, 0.5);
        opacity: 1;
      }
      // .cover {
      //   position: absolute;
      //   bottom: 0;
      //   left: 0;
      //   right: 0;
      //   height: 13.3rem;
      //   background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
      // }
    }
    .desc {
      width: 66.6rem;
      font-size: 2.4rem;
      font-weight: 500;
      color: #ffffff;
      line-height: 4rem;
      opacity: 0.5;
    }
  }
</style>
